<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.7.7/joint.css" />
</head>
<body>
<!-- content -->
<div id="myholder"></div>

<!-- dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.1/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.7.7/joint.js"></script>
<script src="joint.layout.GridLayout.js"></script>
<!-- code -->
<script type="module">
  import { data } from "./data.mjs";
  import { billGraph, Graph } from "./graph.mjs";

  var namespace = joint.shapes;

  var graph = new joint.dia.Graph({}, { cellNamespace: namespace });

  var paper = new joint.dia.Paper({
    el: document.getElementById('myholder'),
    model: graph,
    width: 3600,
    height: 3600,
    cellViewNamespace: namespace
  });

  var rect = new joint.shapes.standard.Rectangle();
  // rect.position(100, 30);
  rect.resize(150, 40);
  rect.attr({
    body: {
      fill: 'blue'
    },
    label: {
      text: '0',
      fill: 'white'
    }
  });

// graph
  const vertices = {}
  billGraph.vertices.forEach((vertex) => {
    var rect2 = rect.clone();
    rect2.attr('label/text', vertex);
    rect2.addTo(graph);
    vertices[vertex] = rect2
  })
  Object.entries(billGraph.edges).forEach(([source, target]) => {
    const link = new joint.shapes.standard.Link();
    link.source(vertices[source])
    link.target(vertices[target])
    link.addTo(graph);
  })

  joint.layout.GridLayout.layout(graph, {
    columns: 40,
    marginY: 50
  });
</script>
</body>
</html>